<template>
  <div class="luntanconcent">
    <van-popup v-model="show" :style="{ borderRadius: '12px' }">
      <div style="width: 296px;
height: 446px;
background: #FFFFFF;padding:16px 22px">
        <div style="color: #17181A;font-size: 12px;font-weight: bold;">我加入的论坛</div>
        <div style="border-bottom: 1px dashed #D7D8DB;margin-top: 12px;margin-bottom: 12px;width: 100%"></div>
        <div
          style="display: flex; flex-wrap: wrap; justify-content: space-between;justify-content: flex-start;width: 360px;">
          <div v-for="(item, index) in titelgamelist" :key="index"
            style="flex: 0 0 calc(25% - 0.5rem); box-sizing: border-box; margin-bottom: 1rem;display:flex;flex-direction:column;justify-content:center;">
            <div>
              <img style="width: 3rem; height: 3rem; border-radius: 0.5rem" :src="item.icon" alt="" />
            </div>
            <div style="font-size: 0.6875rem; color: #7b7d80; margin-top: 4px ">
              {{ truncatedName(item.name) }}
            </div>
          </div>
          <!-- <div  style=" box-sizing: border-box; margin-bottom: 1rem;display:flex;flex-direction:column;justify-content:center;">
     <div>
      <img style="width: 3rem; height: 3rem; border-radius: 0.5rem" src="~/static/guangchang/gameicon@2x.png" alt="" />
    </div>
    <div  style="font-size: 0.6875rem; color: #7b7d80; margin-top: 0.66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;width: 3rem;text-align:center;">
     添加
    </div>
  </div> -->
        </div>
      </div>
    </van-popup>
    <!-- <img src="~/static/guangchang/padding2.png" alt=""
          style="width:3.5rem;height:3.5rem;position:fixed;bottom:4.5rem;right:1.25rem;z-index:9999;" @click="gofabu(1)"> -->
    <div style="display: flex; align-items: center; position: relative">
      <div class="gameyouxi-tabs">
        <div style="
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              margin-right: 1.25rem;
            ">
          <div>
            <img style="width: 3.25rem; height: 3.25rem" src="~/static/guangchang/zhilan.png" alt="" />
          </div>
          <div style="font-size: 0.6875rem; color: #2e3033; margin-top: 0.3rem">
            推荐论坛
          </div>
        </div>
        <div v-for="(item, index) in titelgamelist" :key="index" style="
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              margin-right: 1.25rem;
            " @click="goitemlist(item.id)">
          <div>
            <img style="width: 3rem; height: 3rem; border-radius: 0.5rem" :src="item.icon" alt="" />
          </div>
          <div style="font-size: 0.6875rem; color: #7b7d80; margin-top: 0.66rem">
            {{ truncatedName(item.name) }}
          </div>
        </div>
      </div>
      <div style="position: absolute; right: 0; top: -0.625rem; z-index: 1000" v-if="filteredArray.length > 5">
        <img src="~/static/guangchang/gengduo.png" alt="" style="
              width: 3.8rem;
              height: 3.8rem;
              margin-left: 0.5rem;
              object-fit: cover;
            " @click="show = true" />
      </div>
    </div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" 
  :offset="50">
      <van-cell v-for="(item, index) in yinyuankang2.data" :key="index" @click="goitemlist(item.id)"
        style="margin-top: 1rem;border-radius: 12px;">
        <div style="
              background-color: #ffffff;
              border-radius: 0.75rem;
              padding: 5px 0.75rem;
            ">
          <div style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              ">
            <div style="display: flex; align-items: center">
              <img :src="item.icon" alt="" style="width: 2.5rem; height: 2.5rem; border-radius: 8px" />
              <div style="margin-left: 4px; line-height: 1.5rem">
                <div style="display: flex; align-items: center">
                  <div style="
                        font-size: 0.875rem;
                        color: #17181a;
                        font-weight: bold;
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;width: 6rem;
                      ">
                    {{ item.name }}
                  </div>
                </div>

                <div style="font-size: 11px; color: #aeb0b3; margin-top: -0.4rem">
                  {{ item.guanzhu_num }}用户已加入
                </div>
              </div>
            </div>
            <div v-if="item.is_guanzhu == false" class="guanzhu" @click.stop="follow(item)">
              <img src="~static/guangchang/filled icon@2x (1).png" alt=""
                style="width:.75rem;height:.75rem;object-fit: cover;">
              <div>加入</div>
            </div>
            <div v-if="item.is_guanzhu == true" class="guanzhu2" @click.stop="follow(item)">
              <img src="~static/guangchang/filledicon@2x.png" alt=""
                style="width:.75rem;height:.75rem;object-fit: cover;">
              <div>已加入</div>
            </div>
          </div>
          <div style="margin-top: 0.8125rem">
            <img :src="item.bgimg" alt=""
              style="height: 10.9375rem; width: 100%; border-radius: 0.9375rem;object-fit: cover;" />
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import md5 from "js-md5";
import img1 from "~/static/guangchang/Vector2@2.png";
export default {
  data() {
    return {
      youxitabs: [],
      uid: "",
      t: "",
      textToHash: "",
      page: 1,
      loading: false,
      finished: false,
      refreshing: false,
      yinyuankang2: "",
      filteredArray: "",
      show: false,
      img1: img1,
      titelgamelist: [],
      p:''
    };
  },
  mounted() {
    this.uid = this.getCookie("loginnew");
    this.t = Date.now();
    const sign = `${this.uid}${this.t}fsd213ewdsadqwe2121213edsad`;
    this.textToHash = md5(sign);
    this.getYouxiTabs();
    this.titletabs()
  },
  methods: {
    truncatedName(e) {
      const name = e;
      return name.length > 5 ? name.slice(0, 5) + '...' : name;
    },
    gofabu(e) {
      this.$nuxt.$router.push({ path: "/fabu", query: { e: e } });
    },
    onLoad() {
      if (this.page < this.yinyuankang2.max_p) {
        this.page++;
        this.getYouxiTabs();
      }
      // this.loading = false;
      // if (this.page == this.yinyuankang2.max_p) {
      //   this.finished = true;
      // }
    },
    getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(";").shift();
      return "";
    },
    titletabs() {
      const params = {
        ct: "shequ",
        ac: "guanzhu_list",
        t: this.t,
        uid: this.uid,
        sign: this.textToHash,
      };
      this.$axios.get("api/app/v3", { params }).then((response) => {
        this.titelgamelist = response.data.data;
      });
    },
    getYouxiTabs() {
      const params = {
        ct: "shequ",
        ac: "lists",
        sign: this.textToHash,
        t: this.t,
        uid: this.uid,
        p: this.page,
        type: "",
        keyword: "",
      };
      this.$axios.get("api/app/v3", { params }).then((response) => {
        if (this.page == 1) {
          this.yinyuankang2 = response.data;
          this.filteredArray = response.data.data.filter(
            (item) => item.is_guanzhu == true
          );
          this.loading = false;
        } else {
            this.yinyuankang2.data = this.yinyuankang2.data.concat( response.data.data);
          this.loading = false;
          if (this.page == response.data.max_p) {
            this.finished = true;
          }
            this.titletabs()
          // this.finished = true;
          }


      });
    },
    follow(e) {
      const params = {
        ct: "shequ",
        ac: "guanzhu",
        sign: this.textToHash,
        t: this.t,
        uid: this.uid,
        id: e.id,
      };
      this.$axios.get("api/app/v3", { params }).then((response) => {
        e.is_guanzhu = !e.is_guanzhu;
        this.titletabs()


      });
    },
    goitemlist(e) {
      this.$router.push({
        path: `/gameDetails/gameDetailsIndex`,
        query: { id: e },
      });
    },
  },
};
</script>
<style scoped>
.luntanconcent {
  padding: 1rem 0;
}

.gameyouxi-tabs {
  display: flex;
  align-content: center;
  justify-content: space-between;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.gameyouxi-tabs::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar */
}

.onegame {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.5625rem;
  border: 0.125rem solid #e57617;
  line-height: 3.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.guanzhu {
  width: 4.125rem;
  height: 1.625rem;
  border-radius: 4.25rem;
  background: #2e3033;
  text-align: center;
  line-height: 1.625rem;
  color: #ffffff;
  font-weight: bold;
  margin-left: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tiezi {
  margin-top: 0.5rem;
  height: 2.25rem;
  line-height: 2.25rem;
  text-align: center;
  background: #f7f8fa;
  border-radius: 0.5rem;
  display: flex;
  padding: 0 0.75rem;
  align-items: center;
}

.guanzhu2 {
  width: 4.125rem;
  height: 1.625rem;
  border-radius: 4.25rem;
  background: #F2F3F5;
  text-align: center;
  line-height: 1.625rem;
  font-weight: bold;
  margin-left: 4rem;
  color: #C8C9CC;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
